﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Win8AppBox.ImagemTextoB"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Win8AppBox"
    xmlns:common="using:Win8AppBox.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    
    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
   
    
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Text="Exemplo de imagem e texto B" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <Grid Name="GrupoGrid" Grid.Row="1" Margin="120,0,36,36" Width="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Image  Grid.Row="0" Grid.Column="0" Width="400" Height="Auto" Source="Assets/MediumGray.png" VerticalAlignment="Top" Margin="10,10,10,10"/>

            <ScrollViewer  Grid.Row="1" Width="Auto"  Height="270" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalAlignment="Stretch"   >
                <StackPanel  Grid.Row="1" Grid.Column="1" Width="Auto" Orientation="Vertical"  HorizontalAlignment="Left">
                    <TextBlock x:Name="text"   Grid.Row="1" Grid.Column="1" TextWrapping="Wrap" Width="Auto"  Style="{StaticResource TextoTextStyle}" FontSize="24" FontFamily="Segoe UI Light" TextTrimming="WordEllipsis" LineHeight="24"  >
                    	    <Span>
                    		    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus metus, ullamcorper a mattis sit amet, venenatis ut tortor. Sed sed justo leo. Morbi in justo enim, quis lobortis magna. Morbi ut vehicula nisl. Vivamus diam turpis, volutpat ut blandit eget, malesuada eu neque. Sed vitae velit risus, sed gravida justo. Aenean quis lacus pulvinar nunc accumsan varius. Suspendisse id nibh et ligula molestie rhoncus nec at sem. Pellentesque justo erat, ultricies ac pellentesque ut, congue viverra tortor."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Aenean nisl nisi, elementum a luctus id, mattis eu libero. Mauris pellentesque pulvinar massa sit amet consectetur. Integer et dui risus, non imperdiet ligula. Vivamus nisl eros, convallis sit amet adipiscing pulvinar, mollis et arcu. Donec lacus felis, sodales eu rutrum id, iaculis eu elit. Nulla quis porttitor nibh. Sed feugiat, odio a vehicula gravida, arcu enim hendrerit libero, nec rutrum quam lorem vitae magna. Praesent et nisl non diam ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Ut est purus, pulvinar in feugiat vel, pellentesque eget massa. Maecenas volutpat suscipit porta. Curabitur vel blandit nulla. Curabitur consequat nunc eu felis ornare vel blandit turpis dapibus. Suspendisse id justo ligula. Maecenas nec erat eget ipsum tempor auctor ac ut quam. Nunc a ipsum quis nisi elementum sodales. Mauris diam lacus, gravida eu molestie eu, faucibus non mauris."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Run Text="Donec eget mattis erat. Nulla eget vehicula lectus. Nullam arcu lectus, molestie ac fringilla non, ultrices ac nulla. Sed ut urna molestie diam tristique faucibus. Ut mollis sodales ligula, eu dictum diam tincidunt sed. Mauris lobortis ligula in diam aliquam vel convallis erat pharetra. Vivamus dignissim, lectus non vulputate tincidunt, sapien orci sodales risus, sit amet dictum metus metus id massa. Pellentesque facilisis, nulla in vehicula adipiscing, est ligula ullamcorper arcu, ut tristique elit eros nec augue. Proin scelerisque pretium faucibus."/>
                                <Span>
                    		    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus metus, ullamcorper a mattis sit amet, venenatis ut tortor. Sed sed justo leo. Morbi in justo enim, quis lobortis magna. Morbi ut vehicula nisl. Vivamus diam turpis, volutpat ut blandit eget, malesuada eu neque. Sed vitae velit risus, sed gravida justo. Aenean quis lacus pulvinar nunc accumsan varius. Suspendisse id nibh et ligula molestie rhoncus nec at sem. Pellentesque justo erat, ultricies ac pellentesque ut, congue viverra tortor."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                        
                    	    <Span>
                    		    <Run Text="Aenean nisl nisi, elementum a luctus id, mattis eu libero. Mauris pellentesque pulvinar massa sit amet consectetur. Integer et dui risus, non imperdiet ligula. Vivamus nisl eros, convallis sit amet adipiscing pulvinar, mollis et arcu. Donec lacus felis, sodales eu rutrum id, iaculis eu elit. Nulla quis porttitor nibh. Sed feugiat, odio a vehicula gravida, arcu enim hendrerit libero, nec rutrum quam lorem vitae magna. Praesent et nisl non diam ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Ut est purus, pulvinar in feugiat vel, pellentesque eget massa. Maecenas volutpat suscipit porta. Curabitur vel blandit nulla. Curabitur consequat nunc eu felis ornare vel blandit turpis dapibus. Suspendisse id justo ligula. Maecenas nec erat eget ipsum tempor auctor ac ut quam. Nunc a ipsum quis nisi elementum sodales. Mauris diam lacus, gravida eu molestie eu, faucibus non mauris."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Run Text="Donec eget mattis erat. Nulla eget vehicula lectus. Nullam arcu lectus, molestie ac fringilla non, ultrices ac nulla. Sed ut urna molestie diam tristique faucibus. Ut mollis sodales ligula, eu dictum diam tincidunt sed. Mauris lobortis ligula in diam aliquam vel convallis erat pharetra. Vivamus dignissim, lectus non vulputate tincidunt, sapien orci sodales risus, sit amet dictum metus metus id massa. Pellentesque facilisis, nulla in vehicula adipiscing, est ligula ullamcorper arcu, ut tristique elit eros nec augue. Proin scelerisque pretium faucibus."/>
                    </TextBlock>
                </StackPanel>
            </ScrollViewer>

            
        </Grid>


        <Grid Name="SnapGrid" Visibility="Collapsed" Grid.Row="1" Margin="36,0,36,36">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            
            <Image Width="250" Height="250" Source="Assets/MediumGray.png" VerticalAlignment="Center"/>

            <ScrollViewer  Grid.Row="1" Width="Auto"  Height="320" HorizontalScrollMode="Disabled" VerticalScrollMode="Auto" VerticalAlignment="Stretch"   >
                <StackPanel  Grid.Row="1" Width="Auto" Orientation="Vertical"  HorizontalAlignment="Left">
                    <TextBlock x:Name="textSnapped"   Grid.Row="1"  TextWrapping="Wrap" Width="Auto"  Style="{StaticResource TextoTextStyle}" FontSize="24" FontFamily="Segoe UI Light" TextTrimming="WordEllipsis" LineHeight="24"  >
                    	    <Span>
                    		    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus metus, ullamcorper a mattis sit amet, venenatis ut tortor. Sed sed justo leo. Morbi in justo enim, quis lobortis magna. Morbi ut vehicula nisl. Vivamus diam turpis, volutpat ut blandit eget, malesuada eu neque. Sed vitae velit risus, sed gravida justo. Aenean quis lacus pulvinar nunc accumsan varius. Suspendisse id nibh et ligula molestie rhoncus nec at sem. Pellentesque justo erat, ultricies ac pellentesque ut, congue viverra tortor."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Aenean nisl nisi, elementum a luctus id, mattis eu libero. Mauris pellentesque pulvinar massa sit amet consectetur. Integer et dui risus, non imperdiet ligula. Vivamus nisl eros, convallis sit amet adipiscing pulvinar, mollis et arcu. Donec lacus felis, sodales eu rutrum id, iaculis eu elit. Nulla quis porttitor nibh. Sed feugiat, odio a vehicula gravida, arcu enim hendrerit libero, nec rutrum quam lorem vitae magna. Praesent et nisl non diam ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Ut est purus, pulvinar in feugiat vel, pellentesque eget massa. Maecenas volutpat suscipit porta. Curabitur vel blandit nulla. Curabitur consequat nunc eu felis ornare vel blandit turpis dapibus. Suspendisse id justo ligula. Maecenas nec erat eget ipsum tempor auctor ac ut quam. Nunc a ipsum quis nisi elementum sodales. Mauris diam lacus, gravida eu molestie eu, faucibus non mauris."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Run Text="Donec eget mattis erat. Nulla eget vehicula lectus. Nullam arcu lectus, molestie ac fringilla non, ultrices ac nulla. Sed ut urna molestie diam tristique faucibus. Ut mollis sodales ligula, eu dictum diam tincidunt sed. Mauris lobortis ligula in diam aliquam vel convallis erat pharetra. Vivamus dignissim, lectus non vulputate tincidunt, sapien orci sodales risus, sit amet dictum metus metus id massa. Pellentesque facilisis, nulla in vehicula adipiscing, est ligula ullamcorper arcu, ut tristique elit eros nec augue. Proin scelerisque pretium faucibus."/>
                                <Span>
                    		    <Run Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tellus metus, ullamcorper a mattis sit amet, venenatis ut tortor. Sed sed justo leo. Morbi in justo enim, quis lobortis magna. Morbi ut vehicula nisl. Vivamus diam turpis, volutpat ut blandit eget, malesuada eu neque. Sed vitae velit risus, sed gravida justo. Aenean quis lacus pulvinar nunc accumsan varius. Suspendisse id nibh et ligula molestie rhoncus nec at sem. Pellentesque justo erat, ultricies ac pellentesque ut, congue viverra tortor."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                        
                    	    <Span>
                    		    <Run Text="Aenean nisl nisi, elementum a luctus id, mattis eu libero. Mauris pellentesque pulvinar massa sit amet consectetur. Integer et dui risus, non imperdiet ligula. Vivamus nisl eros, convallis sit amet adipiscing pulvinar, mollis et arcu. Donec lacus felis, sodales eu rutrum id, iaculis eu elit. Nulla quis porttitor nibh. Sed feugiat, odio a vehicula gravida, arcu enim hendrerit libero, nec rutrum quam lorem vitae magna. Praesent et nisl non diam ullamcorper pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Span>
                    		    <Run Text="Ut est purus, pulvinar in feugiat vel, pellentesque eget massa. Maecenas volutpat suscipit porta. Curabitur vel blandit nulla. Curabitur consequat nunc eu felis ornare vel blandit turpis dapibus. Suspendisse id justo ligula. Maecenas nec erat eget ipsum tempor auctor ac ut quam. Nunc a ipsum quis nisi elementum sodales. Mauris diam lacus, gravida eu molestie eu, faucibus non mauris."/>
                    	    </Span>
                    	    <LineBreak/>
                    	    <LineBreak/>
                    	    <Run Text="Donec eget mattis erat. Nulla eget vehicula lectus. Nullam arcu lectus, molestie ac fringilla non, ultrices ac nulla. Sed ut urna molestie diam tristique faucibus. Ut mollis sodales ligula, eu dictum diam tincidunt sed. Mauris lobortis ligula in diam aliquam vel convallis erat pharetra. Vivamus dignissim, lectus non vulputate tincidunt, sapien orci sodales risus, sit amet dictum metus metus id massa. Pellentesque facilisis, nulla in vehicula adipiscing, est ligula ullamcorper arcu, ut tristique elit eros nec augue. Proin scelerisque pretium faucibus."/>
                    </TextBlock>
                </StackPanel>
            </ScrollViewer>


        </Grid>

        
        

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GrupoGrid" Storyboard.TargetProperty="Padding">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="96,137,10,56"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!--
                    The back button and title have different styles when snapped, and the list representation is substituted
                    for the grid displayed in all other view states
                -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GrupoGrid" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
